import React, { Component } from "react";
import PropTypes from "prop-types";

import "./index.css";

export default class Footer extends Component {
    static propTypes = {
        todos: PropTypes.array.isRequired,
        changeAll: PropTypes.func.isRequired,
        clearAllDone: PropTypes.func.isRequired,
    };

    state = {
        doneCount: 0,
        allCount: 0,
    };

    handleClearAll = () => {
        this.props.clearAllDone();
    };

    handleCheckAll = (event) => {
        const isCheck = event.target.checked;

        this.props.changeAll(isCheck);
    };

    render() {
        const { todos } = this.props;

        const doneCount = todos.reduce(
            (pre, current) => pre + (current.done ? 1 : 0),
            0
        );
        const total = todos.length;

        return (
            <div className="todo-footer">
                <label>
                    <input
                        type="checkbox"
                        disabled={total === 0}
                        checked={
                            doneCount === total && total > 0 ? true : false
                        }
                        onChange={this.handleCheckAll}
                    />
                </label>
                <span>
                    <span>已完成 {doneCount}</span> / 全部 {total}
                </span>
                <button
                    onClick={this.handleClearAll}
                    className="btn btn-danger"
                >
                    清除已完成任务
                </button>
            </div>
        );
    }
}
